import _ from 'lodash'
import moment from 'moment'
class ONLINEECHARTS {
  constructor (charts, params, processMsg) {
    this.charts = charts
    this.timer = null
    this.params = params
    this.processMsg = processMsg
    this.option = {
      title: this._setTitle(),
      grid: {
        left: '3%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: this._setTooltip(),
      xAxis: this._setxAxis(),
      yAxis: this._setyAxis(),
      series: this._setsSeries()
    }
  }
  _setProcessMsg (val) {
    this.processMsg = val
  }
  _setTitle () {
    return {
      text: this.params.label,
      left: 'center',
      textStyle: {
        color: '#333333'
      }
    }
  }
  _setTooltip () {
    return {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    }
  }
  _setxAxis () {
    return [{
      type: 'category',
      boundaryGap: true,
      axisTick: {
        alignWithLabel: true,
        interval: 'atuo'
      },
      axisLabel: {
        color: '#333333'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#d3d3d3'
        }
      },
      axisPointer: {
        label: {
          backgroundColor: '#C1C0C0'
        }
      },
      data: []
    }]
  }
  _setyAxis () {
    return [
      {
        type: 'value',
        scale: true,
        show: true,
        nameTextStyle: {
          color: '#333333',
          fontWeight: 400,
          fontSize: '12px'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#333333'
          }
        },
        name: this.params.type,
        // splitNumber: 5,
        splitLine: { // y轴分割线样式
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#d3d3d3'
          }
        }
      }
    ]
  }
  _setsSeries () {
    return [this._setsSeriesItem(this.params)]
  }
  _setsSeriesItem ({ color, label }) {
    return {
      name: label,
      type: 'line',
      step: this.params.step || '',
      itemStyle: {
        // 折线拐点标志的样式
        normal: {
          color: color,
          borderWidth: 3,
          borderColor: color
        }
      },
      // 线的颜色
      lineStyle: {
        normal: {
          width: 3,
          color: color
        }
      },
      symbol: 'circle',
      smooth: this.params.step === '',
      data: []
    }
  }
  _setOption () {
    this.charts.setOption(this.option)
  }
  _getchangeData (val) {
    if (_.isEmpty(val)) return
    let axisData = (moment().add(-1, 'seconds')).format('hh:mm:ss')
    let xAxisData = this.option.xAxis[0].data

    let member = val
    // 如果多路径的需要手动添加相应条数
    if (member.length !== 0 && this.option.series.length !== member.length) {
      member.map((v, index) => {
        this.option.series.push(this._setsSeriesItem({ color: this._setColor(index), ...v }))
      })
      this.option.series.pop()
    }
    // 如果主轴的数量为一个 或者没有数据的时候
    if (member.length < 2) {
      let series = this.option.series[0]
      let changeData = series.data
      series.name = member[0] && member[0].label
      changeData.length === 7 && changeData.shift()
      changeData.push((member[0] && member[0].value) || 0)
    } else if (member.length > 1) {
      // 多个主轴的时候
      member.forEach((v, index) => {
        let moreLoad = this.option.series[index]
        moreLoad.name = v.label
        moreLoad.data.length === 7 && moreLoad.data.shift()
        moreLoad.data.push(v.value || 0)
      })
      this.option.series = _.take(this.option.series, member.length)
    }
    xAxisData.length === 7 && xAxisData.shift()
    xAxisData.push(axisData)
  }
  _setColor (index) {
    const arr = ['#17D77F', '#5F77FD', '#E33333', '#43D7C5', '#F7B72D', '#43D7C5', '#FF8559']
    return arr[index]
  }
  _setIntOption () {
    const that = this
    this.timer = setInterval(() => {
      that._getchangeData(that.processMsg)
      that._setOption()
    }, 1000)
    return this.timer
  }
  clearSetint () {
    this.timer && clearInterval(this.timer)
    this.charts && this.charts.dispose()
    this.charts = null
  }
}
export default ONLINEECHARTS
